<!-- 告警中心-配置中心 -->
<template>
    <div class="t-ctn">
        <div class="demo-form-inline">
            <div class="sub-tabs">
                <span :class="['sub-tab-item',{'active':currentTabCfg ===1}]" @click="currentTabCfg = 1">群组配置</span>
                <span :class="['sub-tab-item',{'active':currentTabCfg ===2}]" @click="currentTabCfg = 2">告警配置</span>
            </div>
            <div class="sub-tabs-r" v-if="currentTabCfg === 2">
                <el-select v-model="systemId" @change="choiceType">
                    <el-option
                        v-for="(item,index) in typeOptions"
                        :key="index"
                        :label="item.name"
                        :value="item.systemid">
                    </el-option>
                </el-select>
            </div>
            <div class="sub-tabs-r" v-if="currentTabCfg === 1">
                <el-button
                    :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                    :disabled="roles[0].roleCode === 'Query_Data'"
                    @click="handleAdd">新建群组</el-button>
                <el-button
                    :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                    :disabled="roles[0].roleCode === 'Query_Data'"
                    @click="handleImport">群组批量导入</el-button>
            </div>
        </div>
        <!-- 告警配置 -->
        <div class="s-n-ctn-main" style="display: block;" v-if="currentTabCfg === 2">
            <div style="height:100%" ref="tableWrapper">
                <el-table
                    ref="singleTable"
                    :data="tableData"
                    stripe
                    :height="tableH"
                    style="width: 100%;background-color: transparent;overflow: auto">
                    <el-table-column
                        prop="cnName"
                        show-overflow-tooltip
                        label="诊断项中文名称">
                    </el-table-column>
                    <!--                <el-table-column
                                        prop="diagnosisConfig"
                                        show-overflow-tooltip
                                        label="阈值">
                                    </el-table-column>-->
                    <el-table-column
                        prop="enable"
                        show-overflow-tooltip
                        label="诊断开关">
                        <template slot-scope="scope">
                            <span>{{scope.row.enable === 1 ? '是' : '否'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="informationGroups"
                        show-overflow-tooltip
                        label="通知群组">
                        <template slot-scope="scope">
                            <span>{{scope.row.informationGroups ? formatValue(scope.row) : ''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="noticeEnable"
                        show-overflow-tooltip
                        label="通知开关">
                        <template slot-scope="scope">
                            <span>{{scope.row.noticeEnable === 1 ? '是' : '否'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="severity"
                        show-overflow-tooltip
                        label="告警级别">
                    </el-table-column>
                    <el-table-column
                        prop="systemId"
                        show-overflow-tooltip
                        label="所属供热系统">
                    </el-table-column>
                    <!--                <el-table-column
                                        prop="type"
                                        show-overflow-tooltip
                                        label="诊断类型">
                                    </el-table-column>-->
                    <el-table-column label="操作" width="180px" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                                :disabled="roles[0].roleCode === 'Query_Data'"
                                @click.native.stop="handleEdit( scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 设计上没有分页 -->
            <!--<el-pagination
                v-if="tableData.length > 0"
                :total="total"
                :page.sync="formCheckCfg.pageNo"
                :limit.sync="formCheckCfg.pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 100px"
                @pagination="getDiagnoseItemList()"
            />-->
        </div>

        <!-- 群组配置 -->
        <div class="s-n-ctn-main" v-if="currentTabCfg === 1">
            <template v-if="qunList && qunList.length">
                <div class="zu-item" v-for="(item,index) in qunList">
                    <div class="zu-item-title">
                        <span>{{item.name}}</span>
                        <el-button type="primary" @click="handleViiewZu(item)">查看</el-button>
                    </div>
                    <div class="zu-item-ctn">
                        <div class="zu-item-row">
                            <label>电话信息数：</label>
                            <span>{{item.poneNums}}</span>
                        </div>
                        <div class="zu-item-row">
                            <label>邮件信息数：</label>
                            <span>{{item.emailNums}}</span>
                        </div>
                       <!-- <div class="zu-item-row">
                            <label>是否订阅：</label>
                            <span>否</span>
                        </div>-->
                        <div class="zu-item-row" style="text-align: center">
                            <el-button
                                :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                                :disabled="roles[0].roleCode === 'Query_Data'"
                                       @click="handleEditZu(item)">编辑</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- 新建群组 -->
        <el-dialog v-if="openCfgA" :visible.sync="openCfgA" custom-class="check" title="告警配置" width="720px">
            <el-form
                ref="formCheckCfgD"
                :model="formCheckCfgD">

                <el-form-item prop="name" label="群组名称：" style="display: flex">
                    <el-input
                        v-model="formCheckCfgD.name"
                        clearable>
                    </el-input>
                </el-form-item>
                <div style="display: flex">
                    <el-form-item prop="phones1" label="电话1："  style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.phones1"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails1" label="邮箱1：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.emails1"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones2" label="电话2：" style="display: flex" >
                        <el-input
                            v-model="formCheckCfgD.phones2"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails2" label="邮箱2：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.emails2"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones3" label="电话3：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.phones3"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails3" label="邮箱3：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.emails3"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones4" label="电话4：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.phones4"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails4" label="邮箱4：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.emails4"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones5" label="电话5：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.phones5"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails5" label="邮箱5：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgD.emails5"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones6" label="电话6：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.phones6"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails6" label="邮箱6：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.emails6"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones7" label="电话7：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.phones7"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="emails7" label="邮箱7：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.emails7"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones8" label="电话8：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.phones8"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="emails8" label="邮箱8：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.emails8"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">

                    <el-form-item prop="phones9" label="电话9：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.phones9"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails9" label="邮箱9：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.emails9"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones10" label="电话10：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.phones10"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails10" label="邮箱10：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgD.emails10"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" style="margin-top: 32px;" @click="handleAGroup">确定</el-button>
                    <el-button type="primary" style="margin-top: 32px;" @click="openCfgA = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 编辑群组 -->
        <el-dialog v-if="openCfgZ" :visible.sync="openCfgZ" custom-class="check" title="告警配置" width="720px">
            <el-form
                ref="formCheckCfgZ" :label-position="'right'"
                :model="formCheckCfgZ">
                    <el-form-item prop="name" label="群组名称：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.name"
                            clearable>
                        </el-input>
                    </el-form-item>
                <div style="display: flex">
                    <el-form-item prop="phones1" label="电话1："  style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.phones1"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails1" label="邮箱1：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.emails1"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones2" label="电话2：" style="display: flex" >
                        <el-input
                            v-model="formCheckCfgZ.phones2"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails2" label="邮箱2：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.emails2"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones3" label="电话3：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.phones3"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails3" label="邮箱3：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.emails3"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones4" label="电话4：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.phones4"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails4" label="邮箱4：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.emails4"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones5" label="电话5：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.phones5"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails5" label="邮箱5：" style="display: flex">
                        <el-input
                            v-model="formCheckCfgZ.emails5"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones6" label="电话6：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.phones6"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails6" label="邮箱6：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.emails6"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones7" label="电话7：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.phones7"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="emails7" label="邮箱7：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.emails7"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones8" label="电话8：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.phones8"
                            clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="emails8" label="邮箱8：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.emails8"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">

                    <el-form-item prop="phones9" label="电话9：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.phones9"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails9" label="邮箱9：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.emails9"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item prop="phones10" label="电话10：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.phones10"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="emails10" label="邮箱10：" style="display: flex;">
                        <el-input
                            v-model="formCheckCfgZ.emails10"
                            clearable>
                        </el-input>
                    </el-form-item>
                </div>
                    <!--<el-form-item prop="enable" label="是否订阅：" style="display: flex;">
                        <el-switch
                            v-model="formCheckCfgZ.enable"
                            inactive-color="#ff4949"
                            active-text="开"
                            inactive-text="关"></el-switch>
                    </el-form-item>-->

                <el-form-item style="margin-top: -20px">
                    <el-button type="primary" style="margin-top: 32px;" @click="handleEditGroup">确定</el-button>
                    <el-button type="primary" style="margin-top: 32px;" @click="openCfgZ = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 群组配置 -->
        <el-dialog v-if="openCfg" :visible.sync="openCfg" custom-class="check" title="告警配置" width="384px">
            <el-form
                ref="formCheckCfg"
                label-width="100px"
                :model="formCheckCfg">
                <el-form-item prop="cnName" label="诊断名称：">
                    <span>{{formCheckCfg.cnName}}</span>
                </el-form-item>
<!--                <el-form-item prop="phones" label="诊断类型：">
                    <el-select v-model="formCheckCfg.type">
                        <el-option
                            v-for="(item,index) in typeOptions1"
                            :key="index"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item prop="name" label="告警级别：">
                    <el-select v-model="formCheckCfg.severity">
                        <el-option
                            v-for="(item,index) in typeOptions2"
                            :key="index"
                            :label="item.severity"
                            :value="item.alarmNum">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="enable" label="诊断开关：">
                    <el-switch
                        v-model="formCheckCfg.enable"
                        inactive-color="#ff4949"
                        :active-value="true"
                        :inactive-value="false"
                        active-text="开"
                        inactive-text="关"></el-switch>
                </el-form-item>
                <el-form-item prop="noticeEnable" label="通知开关：">
                    <el-switch
                        v-model="formCheckCfg.noticeEnable"
                        inactive-color="#ff4949"
                        :active-value="true"
                        :inactive-value="false"
                        active-text="开"
                        inactive-text="关"></el-switch>
                </el-form-item>
                <el-form-item prop="informationGroups" label="通知群组：">
                    <el-button type="primary"  @click="showGroup(formCheckCfg.informationGroups)">选择群组</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="margin-top: 32px;" @click="handleAddGroup">确定</el-button>
                    <el-button type="primary" style="margin-top: 32px;" @click="openCfg = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 群组列表 -->
        <el-dialog v-if="openCfgG" :visible.sync="openCfgG" custom-class="check" title="群组列表" width="454px">
            <el-table
                ref="singleTableG"
                :data="tableDataG"
                stripe
                style="width: 100%;background-color: transparent" @select="handleSelection">
                <el-table-column
                    prop="name"
                    show-overflow-tooltip
                    label="群组名称">
                </el-table-column>
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
            </el-table>
            <div>
                <el-button type="primary" style="margin-top: 32px;" @click="choiceGroup">确定</el-button>
                <el-button type="primary" style="margin-top: 32px;" @click="openCfgG = false">取消</el-button>
            </div>
        </el-dialog>

        <!-- 群组批量导入 -->
        <el-dialog v-if="openCfgIm" :visible.sync="openCfgIm" custom-class="check" title="群组批量导入" width="554px">
            <el-form
                ref="formCheckCfg"
                label-width="100px"
                :model="formCheckCfg">
                <el-form-item prop="valueName" label="文件路径">
                    <div style="display: flex">
                        <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" accept=".docx,.doc,.pdf,.xls">
                       <!-- <el-button type="primary" style="width: 127px;margin-left: 17px">浏览</el-button>-->
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 127px;margin-top: 32px;" @click="submitAddFile">导入</el-button>
                    <el-button type="primary" style="width: 127px;margin-top: 32px;">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 查看信息 -->
        <el-dialog v-if="openCfgV" :visible.sync="openCfgV" custom-class="check" :title="viewZu.name" width="870px">
              <div style="display: flex;justify-content: space-between">
                  <div style="width: 50%">
                      <template v-if="viewZu.phoneList.length > 0">
                          <div v-for="(item,i) in viewZu.phoneList" class="viewZu">
                              <div>电话{{i+1}}:{{item.phone}}</div>
                              <div style="width: 80px;">{{item.status === 0 ? '未订阅':'已订阅'}}</div>
                              <div v-if="item.status === 0">
                                  <el-button :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                                             :disabled="roles[0].roleCode === 'Query_Data'" style="width: 100px" @click="handleDing(item,1)">再次订阅</el-button>
                              </div>
                          </div>
                      </template>
                  </div>
                  <div  style="width: 50%">
                      <template  v-if="viewZu.emaliList.length > 0">
                          <div v-for="(item,i) in viewZu.emaliList" class="viewZu">
                              <div>邮箱{{i+1}}:{{item.email}}</div>
                              <div style="width: 80px;">{{item.status === 0 ? '未订阅':'已订阅'}}</div>
                              <div v-if="item.status === 0">
                                  <el-button :type="roles[0].roleCode === 'Query_Data' ? 'info' : 'primary'"
                                             :disabled="roles[0].roleCode === 'Query_Data'" style="width: 100px"  @click="handleDing(item,2)">再次订阅</el-button>
                              </div>
                          </div>
                      </template>
                  </div>
              </div>
        </el-dialog>
    </div>
</template>

<script>
    import API from '@/request/api'
    import {get} from "../../../request/http";
    export default {
        name: 'ConfigurationCenter',
        components: {

        },
        computed: {
            roles(){
                return this.$store.state.roles
            }
        },
        data() {
            return {
                openCfg: false, // 群组配置
                openCfgV: false, // 群组配置
                openCfgIm: false,
                viewZu: {},
                formCheckCfg:{
                },
                currentTabCfg: 1,
                tableData:[],
                total: '',
                qunList:[],
                typeOptions:[],
                systemId:'',
                openCfgG: false, // 显示群组
                openCfgZ: false, // 群组配置
                openCfgA: false, // 群组新建弹窗
                tableDataG:[],
                formCheckCfgZ:{
                    emails1:'',
                    phones1:'',
                    emails2:'',
                    phones2:'',
                    emails3:'',
                    phones3:'',
                    emails4:'',
                    phones4:'',
                    emails5:'',
                    phones5:'',
                    emails6:'',
                    phones6:'',
                    emails7:'',
                    phones7:'',
                    emails8:'',
                    phones8:'',
                    emails9:'',
                    phones9:'',
                    emails10:'',
                    phones10:'',
                },
                formCheckCfgD:{},
                typeOptions1:[],
                typeOptions2:[],
                addArr:[],
                tableH:0,
                informationGroups:[] // 群组列表
            };
        },
        mounted() {
            // 告警中心-查询群组
            this.getGroupInfo()
            // 获取供热系统列表
            this.sourceTarget()
        },
        watch: {
            'currentTabCfg':{
                handler(newV,oldV){
                    // 如果选中告警配置
                    if(newV === 2){
                        this.getDiagnoseItemList()
                        this.fetTableHeight()
                    }
                    // 如果选中群组配置
                    if(newV === 1){
                        this.getGroupInfo()
                    }
                }
            }
        },
        methods: {
            resetHeight() {
                return new Promise((resolve, reject) => {
                    this.tableH = 0
                    resolve()
                })
            },
            // 设置table高度
            fetTableHeight() {
                this.resetHeight().then(res => {
                    this.tableH = this.$refs.tableWrapper.getBoundingClientRect().height - 20
                })
            },
            handleDing(item,type){
                let data = {
                    id:this.viewZu.id,
                    mode:type === 1 ? item.phone : item.email
                }
                let typeNew = type === 1 ? 'updateSubscriptionsStatusPhone': 'updateSubscriptionsStatusEmail'
                API[typeNew](data).then(res => {
                    if(res.code === 200){
                        this.openCfgV = false
                        this.msgWarning(res.result);
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    // this.msgWarning(err);
                });
            },
            choiceType(){
                this.getDiagnoseItemList()
            },
            async showInfo(){

                let res4 =  await API.alarmType()
                let res5 =  await API.alarmLevel()

                if(res4.code === 200){
                    this.typeOptions1 = res4.result
                }else{
                    this.msgWarning(res4.message);
                }

                if(res5.code === 200){
                    this.typeOptions2 = res5.result
                }else{
                    this.msgWarning(res5.message);
                }
            },
            getFile(event){
                var file = event.target.files;
                for(var i = 0;i<file.length;i++){
                    //    上传类型判断
                    var imgName = file[i].name;
                    var idx = imgName.lastIndexOf(".");
                    if (idx !== -1){
                        let ext = imgName.substr(idx+1).toUpperCase();
                        ext = ext.toLowerCase( );
                        if (ext!='pdf' && ext!='doc' && ext!='docx' && ext!='xls'){

                        }else{
                            this.addArr.push(file[i]);
                        }
                    }else{

                    }
                }
            },
            submitAddFile(){
                if(0 === this.addArr.length){
                    this.$message({
                        type: 'info',
                        message: '请选择要上传的文件'
                    });
                    return;
                }

                var formData = new FormData();
                formData.append('num', this.addType);
                formData.append('linkId',this.addId);
                formData.append('rfilename',this.addFileName);
                for(var i=0;i<this.addArr.length;i++){
                    formData.append('fileUpload',this.addArr[i]);
                }
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'Authorization': this.token
                    }
                };

                API.importExcel(formData).then(res => {
                    if(res.code === 0){
                        this.msgSuccess('上传成功');
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    // this.msgWarning(err);
                });
            },
            // 供热系统列表
            sourceTarget(){
                API.sourceTarget().then(res => {
                    if(res.code === 0){
                        this.typeOptions = res.result;
                        if(res.result.length > 0){
                            this.systemId = res.result[0].systemid
                            this.showInfo()
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            },
            //
            handleSelection(selectT,row){
                this.informationGroups = selectT
            },
            // 新增
            handleAdd(){
                this.openCfgA = true
            },
            // 导入
            handleImport(){
                this.openCfgIm = true
            },
            // 编辑行信息
            handleEdit(row){
                this.formCheckCfg = {...row};
                this.openCfg = true
            },
            // 格式化组
            formatValue(arrOld){
                let a =  JSON.parse(arrOld['informationGroups']);
                let arrNew = a.map(item => {
                    return item.name;
                })
                return  arrNew.toString();
            },
            // 组信息编辑
            handleEditZu(item){
                let data = {}
                if(item.emails && item.emails !== ''){
                    let emails = item.emails.split(",")
                    emails.map((item,i)=>{
                        data[`emails${i+1}`] = item
                    })
                }

                if(item.phones && item.phones !== ''){
                    let phones = item.phones.split(",")
                    phones.map((item,i)=>{
                        data[`phones${i+1}`] = item
                    })
                }

                Object.assign(this.formCheckCfgZ,item,data)
                this.openCfgZ = true
            },
            // 查看组
            handleViiewZu(item){
                API.getGroupInfoVite({id:item.id}).then(res => {
                    if(res.code === 200){
                        this.viewZu = res.result
                        this.viewZu.id = item.id
                        this.openCfgV = true
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    // this.msgWarning(err);
                });
            },
            // 选择群组
            showGroup(informationGroups){
                let that = this
                API.getCheckedGroup({id:this.formCheckCfg.id}).then(res => {
                    if(res.code === 0){
                        this.openCfgG = true
                        this.tableDataG = res.result;
                        let informationGroupsNew = JSON.parse(informationGroups)
                        if(informationGroupsNew && informationGroupsNew.length > 0){
                            informationGroupsNew.forEach(row => {
                                let index = res.result.findIndex(item=> item.bid === row.bid )
                                if(index > -1){
                                    that.$nextTick(()=>{
                                        that.$refs.singleTableG.toggleRowSelection(that.tableDataG[index],true);
                                    })
                                }
                            });
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            },
            // 确认选择群组
            choiceGroup(){
                this.formCheckCfg.informationGroups = (this.informationGroups && this.informationGroups.length > 0) ? JSON.stringify(this.informationGroups) : null
                this.openCfgG = false
            },
            // 编辑配置中心
            handleAddGroup(){
                /*if(!this.formCheckCfg.informationGroups){
                    return this.msgWarning('请选择群组')
                }*/
                API.editDiagnoseItem(this.formCheckCfg).then(res => {
                    if(res.code === 200){
                        this.openCfg = false;
                        this.getDiagnoseItemList();
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    //this.msgWarning(err);
                });
            },
            // 新增群组
            handleAGroup(){
                let datas = {
                    emails: '',
                    phones: '',
                    name:this.formCheckCfgD.name,
                }
                for (let i = 0;i <11;i++){
                    if(this.formCheckCfgD[`emails${i+1}`] != null && this.formCheckCfgD[`emails${i+1}`] !== ''){
                        datas.emails =  this.formCheckCfgD[`emails${i+1}`]  + ','+datas.emails
                    }

                    if(this.formCheckCfgD[`phones${i+1}`] != null && this.formCheckCfgD[`phones${i+1}`] !== ''){
                        datas.phones = this.formCheckCfgD[`phones${i+1}`]  + ','+ datas.phones
                    }
                }

                API.createGroupList(datas).then(res => {
                    if(res.code === 200){
                        this.openCfgA = false;
                        this.getGroupInfo();
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                    // this.msgWarning(err);
                });
            },
            // 群组配置-提交编辑修改
            handleEditGroup(){
                let datas = {
                    emails: '',
                    phones: '',
                    id:this.formCheckCfgZ.id,
                    name:this.formCheckCfgZ.name,
                }

                for (let i = 0;i <11;i++){
                    if(this.formCheckCfgZ[`emails${i+1}`] != null && this.formCheckCfgZ[`emails${i+1}`] !== ''){
                        datas.emails =  this.formCheckCfgZ[`emails${i+1}`]  + ','+datas.emails
                    }

                    if(this.formCheckCfgZ[`phones${i+1}`] != null && this.formCheckCfgZ[`phones${i+1}`] !== ''){
                        datas.phones = this.formCheckCfgZ[`phones${i+1}`]  + ','+ datas.phones
                    }
                }
                API.updateGroupList(datas).then(res => {
                    if(res.code === 200){
                        this.openCfgZ = false;
                        this.getGroupInfo();
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            },
            // 告警配值列表
            getDiagnoseItemList(){
                API.getDiagnoseItemList({systemId:this.systemId}).then(res => {
                    if(res.code === 0){
                        this.tableData = res.result;
                        if(res.result.length === 0){
                            this.msgWarning('无数据');
                        }
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            },
            // 群组列表
            getGroupInfo(){
                API.getGroupInfo().then(res => {
                    if(res.code === 0){
                        this.qunList = res.result;
                    }else{
                        this.msgWarning(res.message);
                    }
                }).catch(err => {
                   // this.msgWarning(err);
                });
            }
        }
    };
</script>

<style lang="scss" type="text/scss" scoped>
    .t-ctn {

        ::v-deep .check{
            .el-form-item__label{
                width: 100px;
            }
        }

        .viewZu{
            display: flex;
            align-items: center;
            font-size: 16px;
            height: 50px;

            >div{
                margin-right: 10px;

                &:first-child{
                    width: 190px;
                    text-align: left;
                }

            }
        }

        .demo-form-inline{
            height: 102px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-right: 42px;
            margin-left: 46px;

            .sub-tabs{
                color: #00e4ff;

                .sub-tab-item{
                    width: 97px;
                    height: 42px;
                    line-height: 42px;
                    border: 1px solid #008aff;
                    display: inline-block;
                    cursor: pointer;

                    &:first-child{
                        border-radius: 5px 0 0 0;
                    }
                    &:last-child{
                        border-radius: 0 5px 0 0;
                    }

                    &.active{
                        background: #156fcb;
                        border: 1px solid #008aff;
                        color: #ffffff;
                    }
                }
            }

            .sub-tabs-r{

                span{
                    width: 133px;
                    height: 42px;
                    line-height: 42px;
                    background: #156fcb;
                    border: 1px solid #008aff;
                    border-radius: 4px;
                    display: inline-block;
                    margin-left: 14px;
                    color: #cee1f3;
                }
            }
        }

        .zu-item{
            background: rgba(3,59,117,0.86);
            border: 1px solid #008aff;
            font-size: 18px;
            width: 300px;
            margin-right: 17px;

            .zu-item-title{
                background: rgba(8,78,150,0.29);
                height: 50px;
                line-height: 50px;
                padding-left: 39px;
                color: #cee1f3;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            .zu-item-ctn{
                margin-top: 20px;

                .zu-item-row{
                    margin-bottom: 30px;
                    text-align: left;
                    padding: 0 56px;
                    display: flex;
                    justify-content: center;

                    label{
                        color: #cee1f3;
                        width: 180px;
                        margin-right: 43px;
                        display: inline-block;
                    }

                    span{
                        color: #00e4ff;
                        word-break: break-all;
                    }
                }
            }

        }

        .s-n-ctn-main{
            height: calc(100% - 102px);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
    }
</style>

